<template>
  <div class="LoginView">
    <div class="Login-one">

      <div class="Login-top">
        <div class="top-left">
          <div class="left-title">
            <p>车响汽车CRM系统</p>
            <p>CAR CRM SYSTEM</p>
          </div>

          <div class="left-btn">
            <div class="btn">

            </div>
            <div class="btn">

            </div>
            <div class="btn">

            </div>
          </div>
        </div>

        <el-form class="top-right" ref="userlist" :model="userlist" :rules="rules">
          <div class="right-title">
            登录
          </div>
          <div class="right-input">
            <el-form-item label="" prop="phoneNum">
              <el-input class="zhanghao" id="zhanghao" type="text" v-model="userlist.phoneNum" placeholder="请输入手机号"
                autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="" prop="passWord">
              <el-input class="mima" type="password" v-model="userlist.passWord" placeholder="请输入密码"
                autocomplete='new-password'></el-input>
            </el-form-item>
          </div>

          <div class="right-btn">
            <button class="btn" @click="goHome()">登录</button>
          </div>
          <div class="right-register">
            <span @click="goRegister()">没有账号？点击注册</span>
          </div>

        </el-form>

      </div>
    </div>

  </div>
</template>

<script>
import { getUserList, addUserInfor } from "@/api/index";

export default {
  name: "LoginView",
  data() {
    return {
      userlist: {
        logo: '',
        userName: '',
        phoneNum: '',
        passWord: '',
        checkPass: '',
        createTime: '',
        dengluTime: '',
        isdelete: 0
      },
      userInfor: {
        logo: '',
        userName: '',
        phoneNum: '',
        passWord: 'bbbb',
        checkPass: '',
        createTime: '',
        dengluTime: '',
        isdelete: 0
      },
      _res: [],
      gettime: "",

      rules: {
        phoneNum: [
          { required: true, message: '请输入你的账号/手机号', trigger: 'blur' },
          { pattern: /^\d{11}$/, message: '账号/手机号不符合要求，11位号码', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入你的密码', trigger: 'blur' },
          { pattern: /^\d{4,12}$/, message: '不符合要求，密码4-12位数字', trigger: 'blur' },
        ],
      },

    };
  },
  methods: {
    async getUserList() {
      const _data = await getUserList();
      this._res = await (_data).data;
      let registerone = window.sessionStorage.getItem('registerone')
      this.userlist.phoneNum = registerone
    },

    goHome() {
      let _res = this._res

      let loginsucess = true;
      for (let i = 0; i < _res.length; i++) {
        if (loginsucess) {
          if (_res[i].phoneNum == this.userlist.phoneNum && _res[i].passWord == this.userlist.passWord) {
            this.userInfor.userName = _res[i].userName
            this.userInfor.phoneNum = _res[i].phoneNum
            this.getTime()
            this.userInfor.dengluTime = this.gettime
            addUserInfor(this.userInfor)

            this.$message({
              message: '成功登录',
              type: 'success'
            })
            loginsucess = false;

            // console.log(_res[i]);
            window.sessionStorage.setItem("token", _res[i].phoneNum);
            return this.$router.push('/home')

          } else if (i == _res.length - 1) {
            document.getElementById('zhanghao').focus();
            alert('账号/密码错误')
          }
        }
      }

    },
    // 前往注册
    goRegister() {
      this.$router.push('/register')
    },

    // 获取当前时间
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() > 9
          ? new Date().getMonth() + 1
          : new Date().getMonth() == 9
            ? new Date().getMonth() + 1
            : '0' + (new Date().getMonth() + 1);
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;

      // console.log(this.gettime);
    },


  },
  mounted() {
    this.getUserList()
  }
}


</script>

<style scoped lang="less" >
.LoginView {
  width: 100vw;
  height: 100vh;
  background-color: #5EB2FF;

  .Login-one {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .img {
      position: absolute;
      display: block;
      height: 100%;

    }

    .Login-top {
      position: absolute;
      display: flex;
      width: 750px;
      height: 400px;
      border-radius: 10px;
      overflow: hidden;
      background-color: #2C89E0;

      .top-left {
        position: relative;
        width: 50%;

        .left-title {
          margin-top: 90px;

          p {
            margin-bottom: 15px;
            padding-left: 60px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;

          }
        }

        .left-btn {
          position: absolute;
          display: flex;
          align-items: center;
          left: 20px;
          bottom: 20px;

          .btn {
            width: 30px;
            height: 8px;
            margin-right: 10px;
            background-color: #ffffff;
            opacity: .5;
          }
        }

      }

      .top-right {
        width: 50%;
        height: 100%;
        background-color: #fff;

        .right-title {
          margin: 50px 0;
          font-weight: 600;
          text-align: center;
        }

        .right-input {
          width: 80%;
          margin: 0 auto;

          .zhanghao {
            width: 100%;
            height: 30px;
            background-color: none;
            border: 0;
            border-bottom: 1px solid #eee;
            outline: none;
          }

          .mima {
            width: 100%;
            height: 30px;
            margin-top: 5px;
            background-color: none;
            border: 0;
            border-bottom: 1px solid #eee;
            outline: none;
          }
        }

        .right-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80%;
          margin: 30px auto 0;

          .btn {
            width: 100%;
            height: 40px;
            border-radius: 5px;
            background-color: #4c9de9;
            color: #fff;
            border: 0;
            cursor: pointer;
          }
        }

        .right-register {
          padding-top: 20px;
          text-align: left;

          span {
            color: #2C89E0;
            text-decoration: underline;
            padding-left: 37.5px;
            cursor: pointer;
          }
        }

      }

    }


  }
}
</style>